<template>
	<el-container :direction="vertical">
		<el-header height="75px">
			<span>
				<router-link to>题库列表</router-link>
			</span>
			<div class="right">
				<el-button type="primary" size="default">刷新</el-button>
				<span>
					<i></i>
					帮助
				</span>
			</div>
		</el-header>
		<el-container :direction="vertical">
			<el-main height>
				<div>
					<el-select v-model="selectlist.subjectList" value-key placeholder="科目" clearable filterable>
						<el-option
							v-for="item in subjectList"
							:key="item.value"
							:label="item.subjectname"
							:value="item.subjecttypes"
						></el-option>
					</el-select>
					<el-select
						v-model="selectlist.questionTypeList"
						value-key
						placeholder="题型"
						clearable
						filterable
					>
						<el-option
							v-for="item in questionTypeList"
							:key="item.value"
							:label="item.testquestionsname"
							:value="item.typesnum"
						></el-option>
					</el-select>
					<el-select
						v-model="selectlist.diffcultyList"
						value-key
						placeholder="难易程度"
						clearable
						filterable
					>
						<el-option
							v-for="item in diffcultyList"
							:key="item.value"
							:label="item.stagename"
							:value="item.stagetypes"
						></el-option>
					</el-select>
					<el-button type="primary" size="default" @click="handelSelect">查询</el-button>
				</div>
			</el-main>
			<el-container :direction="vertical">
				<!-- 试题列表 -->
				<el-table :data="questionList" border stripe>
					<el-table-column type="selection" label="全选" width="80"></el-table-column>
					<el-table-column type="index" label="编号" width="80" :index="indexMethod"></el-table-column>
					<el-table-column label="题干" prop="filltopic" width="100"></el-table-column>
					<el-table-column label="题型" prop="questiontypes" width="50">
            <template slot-scope ="scope">
              <!-- scope 代表表格绑定数组-->
              <!-- scope 代表表格绑定数组-->
              {{ scope.row.questiontypes | filtersQuestiontypes(that)}}
            </template>
          </el-table-column>
					<el-table-column label="所属科目" prop="typenum" width="100"></el-table-column>
					<el-table-column label="难易程度" prop="difficultytypes" width="100"></el-table-column>
					<el-table-column label="创建时间" prop="createtime"></el-table-column>
					<el-table-column label="操作" prop="filltopic">
						<el-button type="success" size="mini">查看</el-button>
						<span>|</span>
						<el-button type="primary" size="mini">修改</el-button>
					</el-table-column>
					<el-table-column label="删除" >
            <el-button type="danger" size="mini">删除</el-button>
          </el-table-column>
				</el-table>

				<!-- 分页器 -->
				<el-pagination
					@size-change="sizeChange"
					@current-change="currentChange"
					:current-page.sync="pageNum"
					:page-sizes="[10,30,50]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					background
				>:pager-count="7"></el-pagination>
			</el-container>
		</el-container>

		<el-footer height>
			<!-- Footer content -->
		</el-footer>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
      that:this,
			vertical: "vertical",
			horizontal: "horizontal",
			selectlist: {},
			questionList: [], // 试题列表
			questionTypeList: [], //题型
			subjectList: [], // 科目
			diffcultyList: [], // 难易程度
			total: 0, // 总数
			pageNum: 1, // 页码数
			pageSize: 10 // 每页数量
		};
  },
  filters: {
    //过滤题型
    filtersQuestiontypes(type, that) {
      //that是 vue组件 实例
      for(let i = 0; i<that.questionTypeList.length; i++) {
        // typesnum是试题类型
        if(type == that.questionTypeList[i].typesnum) {
          //testquestionsname 类型对应的名称
          return that.questionTypeList[i].testquestionsname;
        }
      }
    }
  },
	async created() {
		//获取试题列表
		await this.getQuestionList();

		//获取数据: 题型 科目 难易程度
		await this.getQuestionTypeList();
		await this.getSubjectList();
		await this.getDiffcultyList();
		// console.log(this.questionTypeList, this.subjectList, this.diffcultyList);
		console.log(this.questionList);
	},
	methods: {
		// 获取试题列表
		async getQuestionList(pageNum = 1, pageSize = 10) {
			// 查询条件
			let selectStr = "";
			selectStr += `?pageNum=${pageNum}&pageSize=${pageSize}&`;
			await this.$axios({
				url: `/system/sqTestquestionstypes/selectByConditionshortanswer${selectStr}`,
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.questionList = res.data.data.allNums;
					this.total = res.data.data.total;
				}
			});
    },
    // 表格自定义编号，第一页从1开始，第二页从11开始···
    indexMethod(index) {
      // index是数组的索引
      //1 0*pageSize+ index + 1
      return (this.pageNum - 1 ) * this.pageSize + (index+1);
    },
    //按条件查询
    handelSelect(){

    },
    //每页显示总条数变化
      sizeChange(val) {
        //当前每页显示数据条数
        this.pageSize = val;
        //调取数据
        this.getQuestionList(this.pageNum,this.pageSize) 
      },
      //页码发生变化
      currentChange(currentChange) {
        //currentChange
        this.pageNum = currentChange;
         //调取数据
        this.getQuestionList(this.pageNum,this.pageSize)
      },
		// 获取题型列表
		async getQuestionTypeList() {
			await this.$axios({
				url: "/system/sqTestquestionstypes/selTestquestions",
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.questionTypeList = res.data.data;
				}
			});
		},
		// 获取科目列表
		async getSubjectList() {
			await this.$axios({
				url: "/system/sqSubjecttable/selSubject",
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.subjectList = res.data.data;
				}
			});
		},
		// 获取难易程度列表
		async getDiffcultyList() {
			await this.$axios({
				url: "/system/sqStagetypes/selstagetypes",
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.diffcultyList = res.data.data;
				}
			});
		},
	}
};
</script>

<style>
header {
	display: flex;
	justify-content: space-between;
	line-height: 75px;
}
</style>

